<template>
  <transition name="slide">
    <div class="user-center">

      <!-- 头部返回按钮 -->
      <div class="back" @click="$router.go(-1)">
        <i class="icon-back"></i>
      </div>

      <!-- tab栏 -->
      <div class="switches-wrapper">
        <switches :switches="switches" :currentIndex="currentIndex" @switch="switchItem"></switches>
      </div>

      <!-- 随机播放 -->
      <div class="play-btn" @click="random">
        <i class="icon-play"></i>
        <span>随机播放全部</span>
      </div>

      <div class="list-wrapper" ref="listWrapper">
        <!-- 我喜欢的 -->
        <scroll class="list-scroll" ref="favoriteList" :data="favoriteList" v-if="currentIndex === 0">
          <div class="list-inner">
            <song-list :songs="favoriteList" @select="selectSong"></song-list>
          </div>
        </scroll>

        <!-- 最近听的 -->
        <scroll class="list-scroll" ref="playHistory" :data="playHistory" v-if="currentIndex === 1">
          <div class="list-inner">
            <song-list :songs="playHistory" @select="selectSong"></song-list>
          </div>
        </scroll>
      </div>

      <div class="no-result-wrapper" v-show="noResult">
        <no-result :title="noResultDesc"></no-result>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import Switches from 'base/switches/switches'
import Scroll from 'base/scroll/scroll'
import SongList from 'base/song-list/song-list'
import { mapGetters, mapActions } from 'vuex'
import Song from 'common/js/song'
import { playlistMixin } from 'common/js/mixin'
import NoResult from 'base/no-result/no-result'
export default{
  mixins: [playlistMixin],
  data () {
    return {
      switches: [{name: '我喜欢的'}, {name: '最近听的'}],
      currentIndex: 0
    }
  },
  computed: {
    noResultDesc () {
      if (this.currentIndex === 0) {
        return '暂无收藏列表'
      } else if (this.currentIndex === 1) {
        return '最近播放列表为空'
      }
    },
    noResult () {
      if (this.currentIndex === 0) {
        return !this.favoriteList.length
      } else if (this.currentIndex === 1) {
        return !this.playHistory.length
      }
    },
    ...mapGetters(['favoriteList', 'playHistory'])
  },
  methods: {
    switchItem (index) {
      this.currentIndex = index
    },
    selectSong (item, index) {
      this.insertSong(new Song(item))
    },
    handlePlaylist (playlist) {
      const bottom = playlist.length ? '60px' : ''
      this.$refs.listWrapper.style.bottom = bottom
      this.$refs.favoriteList && this.$refs.favoriteList.refresh()
      this.$refs.playHistory && this.$refs.playHistory.refresh()
    },
    random () {
      let list = this.currentIndex === 0 ? this.favoriteList : this.playHistory
      if (!list.length) {
        return false
      }
      list = list.map((item, index) => {
        return new Song(item)
      })
      this.randomPlay({
        list: list
      })
    },
    ...mapActions(['insertSong', 'randomPlay'])
  },
  components: { Switches, Scroll, SongList, NoResult }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
  @import '~common/stylus/variable';
  @import '~common/stylus/mixin';
  .user-center
    position fixed;
    top 0;
    bottom 0;
    width 100%;
    z-index 100;
    background-color: $color-background;
    &.slide-enter-active, &.slide-leave-active
      transition all .4s;
    &.slide-enter, &.slide-leave-to
      transform translate3d(100%, 0, 0);
    .back
      position absolute;
      top 0;
      left 0;
      z-index 50;
      .icon-back
        display inline-block;
        font-size 22px;
        padding 10px;
        color $color-theme;
    .switches-wrapper
      width 100%;
      position absolute;
      top 4px;
      left 50%;
      transform translateX(-50%);
    .play-btn
      display flex;
      align-items center;
      justify-content center;
      width 40vw;
      border 1px solid rgba(255,255,255,0.5);
      margin 80px auto;
      border-radius 20px;
      padding 6px 5px;
      font-size $font-size-small;
      color $color-text-l;
      margin-bottom 0;
      .icon-play
        margin-right 4px;
    .list-wrapper
      position absolute;
      top 106px;
      bottom 0;
      width 100%;
      .list-scroll
        height 100%;
        overflow hidden;
        padding 0 20px;
    .no-result-wrapper
      position absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      height: 50%;
      width: 100%;
</style>
